<template>
  <div >
    <el-container>
      <el-header style="text-align: left;margin: 10px 100px">
        <el-button type="info" @click="nodeOverview()" plain>轨迹跟踪</el-button>
        <el-button type="info" @click="trackOverview()" plain>行驶路线</el-button>
        <el-button type="info" @click="$router.push('DispatchNodeTracking')" plain>节点跟踪</el-button>
        <el-button type="info" @click="refresh()" plain>刷新</el-button>
        <el-button type="info" @click="$router.push('DispatchTransportationTrack')" style="float: right" plain>返回</el-button>
      </el-header>
      <el-main style="margin: 10px 100px">
        <baidu-map
          class="map-wrap"
          :center="mapData.center"
          :zoom="mapData.zoom"
          @ready="mapReady">
        </baidu-map>
      </el-main>
    </el-container>
  </div>
</template>
<script>

export default {
  inject: ['myReload'],
  name: "DispatchTrackTracking",
  data() {
    return {
      //地图数据
      mapData: {
        //中心坐标
        center: { lng: 108, lat: 35 },
        //缩放级别
        zoom: 6,
      }
    }
  },

  methods: {
    // 刷新方法
    refresh(){
      this.myReload()
    },
    // 点击轨迹跟踪
    nodeOverview(){
      this.$store.commit('trackOverviewType', 'nodeOverview')
      this.myReload()
    },
    // 点击行驶路线
    trackOverview(){
      this.$store.commit('trackOverviewType', 'trackOverview')
      this.myReload()
    },
    // @ready函数
    mapReady({ BMap, map }){
      if(this.$store.state.trackOverviewType == 'trackOverview'){
        this.mapHandlerTrack({ BMap, map })
      }else {
        this.mapHandlerNode({ BMap, map })
      }
    },

    // 轨迹跟踪地图预处理
    mapHandlerTrack({ BMap, map }) {
      //开启滚轮缩放
      map.enableScrollWheelZoom();
      map.clearOverlays();
      // 当前调度单取值
      let dispatchTicket = this.$store.state.dispatchTicket
      // 定义起点
      let p1 = new BMap.Point(dispatchTicket.startCity.longitude,dispatchTicket.startCity.latitude);
      // 途径点赋值
      let orderRoute = []
      for(let i = 0; i<dispatchTicket.dispatchRouteList.length-1; i++){
        for (let orderForm of dispatchTicket.orderFormList){
          if(dispatchTicket.dispatchRouteList[i].areaId ==orderForm.consigneeAddress){
            let p = new BMap.Point(orderForm.consigneeCity.longitude,orderForm.consigneeCity.latitude);
            orderRoute.push(p);
          }
        }
      }
      // 定义终点
      let p2 = new BMap.Point(dispatchTicket.endCity.longitude,dispatchTicket.endCity.latitude);
      let driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: false}});
      driving.search(p1, p2, { waypoints: orderRoute }) // waypoints表示途经点
      setTimeout(()=>{
        let myGeo = new BMap.Geocoder();
        // 创建图标
        let myIcon = new BMap.Icon("http://api.map.baidu.com/library/LuShu/1.2/examples/car.png", new BMap.Size(60, 25));
        // 车辆当前位置mark在地图上
        myGeo.getPoint(dispatchTicket.currentNodeCity.mergerName, function(point){
          let marker = new BMap.Marker(point, {icon: myIcon})
          let opt = {
            width: 300, // 信息窗口宽度
            height: 0, // 信息窗口高度
          }
          // marker添加点击监听
          marker.addEventListener("click",function (){
            let infoWindow = new BMap.InfoWindow(
              `<div class="mapgrayInfo" >` +
              `<div class="content"><h3>当前车辆位置：</h3>` +
              `<h4>地址：<span>`+dispatchTicket.currentNodeCity.mergerName+`</span></h4>` +
              `<h5>调度单号：<span>`+dispatchTicket.ticketId+`</span></h5>` +
              `<h5>车牌号：<span>`+dispatchTicket.carNumber+`</span></h5>` +
              `<h5>司机：<span>`+dispatchTicket.carInfo.baseDriver.driverName+`</span></h5>` +
              `</div></div>`,opt)
            map.openInfoWindow(infoWindow, point) // 开启信息窗口
          })
          map.addOverlay(marker)
        }, dispatchTicket.currentNodeCity.mergerName)
      },2000)
    },
    // 节点跟踪地图预处理
    mapHandlerNode({ BMap, map }) {
      //开启鼠标滚动缩放
      map.enableScrollWheelZoom();
      map.clearOverlays();
      let myGeo = new BMap.Geocoder();
      // 创建图标
      let myIcon = new BMap.Icon("https://api.map.baidu.com/img/markers.png", new BMap.Size(20, 25),
        {
          offset: new BMap.Size(10, 25), // 指定定位位置
          imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
        });
      // 添加起点城市
      let dispatchTicket = this.$store.state.dispatchTicket
      myGeo.getPoint(dispatchTicket.startCity.mergerName, function(point){
        let marker = new BMap.Marker(point, {icon: myIcon})
        // 添加信息窗口
        let opt = {
          width: 300, // 信息窗口宽度
          height: 0, // 信息窗口高度
        }
        map.addOverlay(marker)
        // marker添加点击监听
        marker.addEventListener("click",function (){
          let infoWindow = new BMap.InfoWindow(
            `<div class="mapgrayInfo" >` +
            `<div class="content"><h3>起点：</h3>` +
            `<h4>地址：<span>`+dispatchTicket.startCity.mergerName+`</span></h4>` +
            `<h5>调度单号：<span>`+dispatchTicket.ticketId+`</span></h5>` +
            `<h5>车牌号：<span>`+dispatchTicket.carNumber+`</span></h5>` +
            `<h5>司机：<span>`+dispatchTicket.carInfo.baseDriver.driverName+`</span></h5>` +
            `<h5>出发时间：<span>`+dispatchTicket.actualStartTime+`</span></h5>` +
            `</div></div>`,opt)
          map.openInfoWindow(infoWindow, point) // 开启信息窗口
        })
      }, dispatchTicket.startCity.mergerName)
      // 添加订单城市
      let orderFormList = this.$store.state.dispatchTicket.orderFormList
      for(const orderForm of orderFormList) {
        let cityIcon = ''
        if(orderForm['currentStatus'] == '已送达'||orderForm['currentStatus'] == '已结算') {
          cityIcon = myIcon
        }
        // 将地址解析结果显示在地图上
        myGeo.getPoint(orderForm.consigneeCity.mergerName, function(point){
          let midMarker = new BMap.Marker(point, {icon: cityIcon})
          // 添加信息窗口
          let midOpt = {
            width: 300, // 信息窗口宽度
            height: 0, // 信息窗口高度
          }
          map.addOverlay(midMarker)
          midMarker.addEventListener("click",function (){
            let infoWindow
            // 添加信息窗口内
            if(orderForm['currentStatus'] == '已送达'||orderForm['currentStatus'] == '已结算') {
              infoWindow = new BMap.InfoWindow(
                `<div class="mapgrayInfo" >` +
                `<div class="content"><h3>中转：</h3>` +
                `<h4>地址：<span>` + orderForm.consigneeCity.mergerName + `</span></h4>` +
                `<h5>调度单号：<span>` + dispatchTicket.ticketId + `</span></h5>` +
                `<h5>车牌号：<span>` + dispatchTicket.carNumber + `</span></h5>` +
                `<h5>司机：<span>` + dispatchTicket.carInfo.baseDriver.driverName + `</span></h5>` +
                `<h5>信息：订单<span>` + orderForm.orderId + `  已送达</span></h5>` +
                `</div></div>`, midOpt)
            }else {
              if(orderForm.consigneeAddress == dispatchTicket.endAreaId){
                infoWindow = new BMap.InfoWindow(
                  `<div class="mapgrayInfo" >` +
                  `<div class="content"><h3>终点：</h3>` +
                  `<h4>地址：<span>`+dispatchTicket.endCity.mergerName+`</span></h4>` +
                  `<h5>调度单号：<span>`+dispatchTicket.ticketId+`</span></h5>` +
                  `<h5>车牌号：<span>`+dispatchTicket.carNumber+`</span></h5>` +
                  `<h5>司机：<span>`+dispatchTicket.carInfo.baseDriver.driverName+`</span></h5>` +
                  `<h5>信息：订单<span>` + orderForm.orderId + `  运输中</span></h5>` +
                  `<h5>预计到达时间：<span>`+dispatchTicket.endTime+`</span></h5>` +
                  `</div></div>`,midOpt)
              }else {
                infoWindow = new BMap.InfoWindow(
                  `<div class="mapgrayInfo" >` +
                  `<div class="content"><h3>中转：</h3>` +
                  `<h4>地址：<span>`+orderForm.consigneeCity.mergerName+`</span></h4>` +
                  `<h5>调度单号：<span>`+dispatchTicket.ticketId+`</span></h5>` +
                  `<h5>车牌号：<span>`+dispatchTicket.carNumber+`</span></h5>` +
                  `<h5>司机：<span>`+dispatchTicket.carInfo.baseDriver.driverName+`</span></h5>` +
                  `<h5>信息：订单<span>` + orderForm.orderId + `  运输中</span></h5>` +
                  `</div></div>`,midOpt)
              }
            }
            map.openInfoWindow(infoWindow, point) // 开启信息窗口
          })
        }, orderForm.consigneeCity.mergerName)
      }
    },
  },
}
</script>
<style scoped>

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.map-wrap {
  width: 100%;
  height: 80%;
  margin: 0;
}
.el-button--info:hover {
  background: #209e91;
  border-color: #209e91;
  color: #FFF;
}
.el-main{
  width:90%;
  height: 50%;
  margin:10px auto;
  background-color: #ffffff;
  box-shadow: 10px 10px 5px #c4c6c7;
  border-radius: 5px
}
</style>
